import React from "react";
import { useState } from "react";

export default function Indicator({
    items,
    onChange,
}: {
    items: any[];
    onChange?: (index: number) => void;
}) {
    const [selectedKey, setSelectedKey] = useState(0);

    const handleClick = (index: number) => {
        setSelectedKey(index);
        onChange!(index);
    };

    return (
        <div className="absolute top-10 left-2 cursor-pointer">
            {items.map((_, index) => {
                return (
                    <div
                        key={index}
                        className={`mb-4 rounded-full text-black bg-white border w-8 h-8 text-center leading-8 ${
                            index !== selectedKey ? "opacity-65" : ""
                        }`}
                        onClick={() => handleClick(index)}
                    >
                        {index + 1}
                    </div>
                );
            })}
        </div>
    );
}
